import apiTool, {
  getUserInfoUrl,
  getUserTypeValue,
  phoneClick,
} from "@/command/apiTool";
import { defineComponent, reactive, ref } from "vue";
import PageTitle from "@/components/PageTitle";
import ListView from "@/components/ListView";
import { IFilterMenuChoose } from "@/components/FilterMenu/types";
import ButtonGroupView from "@/components/ButtonGroupView";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
import RoundInfo from "@/components/RoundInfo";
import GreyBlock from "@/components/GreyBlock";
import RowView from "@/components/RowView";
import TextView from "@/components/TextView";
import Text from "@/components/Text";
import { Divider } from "vant";
import FilterMenuSearch from "@/components/FilterMenuSearch";

export default defineComponent({
  setup(props, {}) {
    const form = ref({ code: "", name: "", major: "", packType: "" });
    const renderItem = (e: any) => {
      const buttons: IButtonGroupViewData[] = [
        {
          text: getUserTypeValue() == "dh" ? "联系小户" : "联系大户",
          type: "primary",
          color: "linear-gradient(90deg, #1989FA 0%, #73B9FF 100%)",
          onClick: () => {
            phoneClick(e.phone);
          },
        },
      ];
      const data = [
        {
          name: "包装类型",
          value: e.packTypeName,
          width: "45%",
        },
        {
          name: "状态",
          value: ["已申请", "已同意", "已拒绝"][e.state],
          width: "45%",
        },
        {
          name: "申请数量",
          value: e.applyNum,
          width: "45%",
        },
      ];
      return (
        <div class="flex flex-col mt-[14px] w-full">
          <RoundInfo
            right={() => <Text>日期: {e.date}</Text>}
            src={e.logoUrl}
            title={e.userName}
            data={data}
          />
          <GreyBlock class="mt-[12px]">
            <RowView class="justify-between flex-1">
              <RowView>
                <TextView>农产品: {e.produceTypeName}</TextView>
              </RowView>
              <ButtonGroupView
                data={buttons}
                class={"flex !justify-end w-[130px] max-sm:w-[170px]"}
              />
            </RowView>
          </GreyBlock>
          <Divider />
        </div>
      );
    };
    const render1 = () => {
      const data: IFilterMenuChoose[] = [
        { type: "area", key: "code" },
        { type: "productType", key: "major", title: "农产品" },
        { type: "packType", key: "packType", title: "包装类型" },
        { type: "datePicker", key: "date", title: "日期" },
      ];
      return (
        <div
          class={"mx-[-15px] mt-[-20px]"}
          style={{
            backgroundColor: "#fff",
            boxShadow: "0px 2px 3px 1px rgba(0,0,0,0.03)",
          }}
        >
          <FilterMenuSearch
            showSearch={getUserTypeValue() == "dh" ? true : false}
            choose={data}
            searchKey="name"
            v-model={form.value}
          />
        </div>
      );
    };
    const render2 = () => {
      return (
        <ListView
          {...getUserInfoUrl({
            dh: "/api/H5/sell/brand/heavy/authorList",
            xh: "/api/H5/sell/brand/small/applyHistoryList",
          })}
          type="page"
          params={form.value}
          renderItem={renderItem}
        />
      );
    };
    return () => (
      <PageTitle
        title={getUserTypeValue() == "dh" ? "授权记录" : "申请记录"}
        bgColor={"white"}
        childClass={"p-14 pt-20 pb-20 bg-[#FFFFFF]"}
      >
        {render1()}
        {render2()}
      </PageTitle>
    );
  },
});
